<template>
  <a-upload name="file" 
    listType="picture-card" 
    :multiple="isMultiple" 
    :action="imagesUploadApi" 
    :headers="headers" 
    :fileList="fileList" 
    :beforeUpload="beforeUpload" 
    :showUploadList="isMultiple" 
    @change="handleChange" 
    @preview="handlePreview">
    <img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="height:104px;max-width:300px" />
    <div v-else>
      <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
      <div class="ant-upload-text">{{ text }}</div>
    </div>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel()">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-upload>
</template>

<script>
// uid
const uidGenerator = () => {
  return '-' + parseInt(Math.random() * 10000 + 1, 10);
};
// 文件名
const getFileName = (path) => {
  if (path.lastIndexOf('\\') >= 0) {
    let reg = new RegExp('\\\\', 'g');
    path = path.replace(reg, '/');
  }
  return path.substring(path.lastIndexOf('/') + 1);
};
import { mapGetters } from 'vuex';
export default {
  name: 'JImageUpload',
  data() {
    return {
      uploadLoading: false,
      picUrl: false,
      headers: {},
      fileList: [],
      previewImage: '',
      previewVisible: false,
    };
  },
  computed: {
    ...mapGetters(['imagesUploadApi']),
  },
  props: {
    text: {
      type: String,
      required: false,
      default: '上传',
    },
    value: {
      type: [String, Array],
      required: false,
    },
    isMultiple: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  watch: {
    value(val) {
      if (val instanceof Array) {
        this.initFileList(val.join(','));
      } else {
        this.initFileList(val);
      }
    },
  },
  created() {
    const token = this.$store.getters.token;
    this.headers = { 'X-Access-Token': token };
  },
  methods: {
    initFileList(paths) {
      if (!paths || paths.length == 0) {
        this.fileList = [];
        return;
      }
      this.picUrl = true;
      let fileList = [];
      let arr = paths.split(',');
      for (var i = 0; i < arr.length; i++) {
        const url = arr[i];
        fileList.push({
          uid: uidGenerator(),
          name: getFileName(arr[i]),
          status: 'done',
          url: url,
          response: {
            status: 'history',
            result: arr[i],
          },
        });
      }
      this.fileList = fileList;
    },
    // 提交图片前-操作
    beforeUpload: function (file) {
      var fileType = file.type;
      if (fileType.indexOf('image') < 0) {
        this.$message.warning('请上传图片');
        return false;
      }
    },
    // 提交图片
    handleChange(info) {
      console.log(info)
      this.picUrl = false;
      let fileList = info.fileList;
      if (info.file.status === 'done') {
        if (info.file.response.success) {
          this.picUrl = true;
          fileList = fileList.map((file) => {
            if (file.response) {
              file.url = file.response.result;
            }
            return file;
          });
        }
        // this.$message.success(`${info.file.name} 上传成功!`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`);
      } else if (info.file.status === 'removed') {
        this.handleDelete(info.file);
      }
      console.log('fileList', fileList);
      this.fileList = fileList;
      if (info.file.status === 'done' || info.file.status === 'removed') {
        this.handlePathChange();
      }
    },
    // 预览
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
    getAvatarView() {
      if (this.fileList.length > 0) {
        let url = this.fileList[0].url;
        return url;
      }
    },
    handlePathChange() {
      let uploadFiles = this.fileList;
      let path = '';
      if (!uploadFiles || uploadFiles.length === 0) {
        path = '';
      }
      let arr = [];
      if (!this.isMultiple) {
        arr.push(uploadFiles[uploadFiles.length - 1].response.result);
      } else {
        for (var a = 0; a < uploadFiles.length; a++) {
          arr.push(uploadFiles[a].response.result);
        }
      }
      if (arr.length > 0) {
        path = arr.join(',');
      }
      this.$emit('change', path);
    },
    handleDelete(file) {
      // 如有需要新增 删除逻辑
      console.log(file);
    },
    handleCancel() {
      this.close();
      this.previewVisible = false;
    },
    close() {},
  },
  model: {
    prop: 'value',
    event: 'change',
  },
};
</script>

<style scoped>
</style>